<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>

<div>
    <form id="form">
        <p>grant_type:<select name="grant_type">
            <option value="password" selected="selected">password</option>
            <option value="client_credentials">client_credentials</option>
            <option value="refresh_token">refresh_token</option>
        </select></p>
        <p>scope:<select name="scope">
            <option value="all" selected="selected">all</option>
            <option value="read">read</option>
            <option value="write">write</option>
            <option value="read write">read,write</option>
        </select></p>
        <p>username:<input type="text" value="system_admin" name="username"></p>
        <p>password:<input type="text" value="123456" name="password"></p>
        <p>client_id:<input type="text" value="1" name="client_id"></p>
        <p>client_secret:<input type="text" value="123456" name="client_secret"></p>
        <p>access_token:<input type="text" name="access_token"></p>
        <p>refresh_token:<input type="text" name="refresh_token"></p>
        <input type="button" id="submit" value="请求">
        <p>result:<textarea id="result"></textarea></p>
    </form>

</div>

<script type="text/javascript" th:src="@{/assets/vendor/jquery-1.11.3/dist/jquery.min.js}"></script>
<script type="text/javascript">

    $(function () {

        $('#submit').click(function () {

            var grant_type = $('select[name="grant_type"]');
            var scope = $('input[name="scope');
            var username = $('input[name="username');
            var password = $('input[name="password');
            var client_id = $('input[name="client_id');
            var client_secret = $('input[name="client_secret');
            var access_token = $('input[name="access_token');
            var refresh_token = $('input[name="refresh_token');
            var result = $('#result');

            switch (grant_type.val()){

                case 'password':
                    $.ajax({
                        url:'http://localhost:8080/oauth/token',
                        type:'post',
                        data:$('#form').serialize(),
                        async:true,
                        success:function (response,status,xhr) {
                            result.val(response);
                            access_token.val(response.access_token);
                            refresh_token.val(response.refresh_token);
                        }
                    });
                    break;
                case 'refresh_token':
                    $.ajax({
                        url:'http://localhost:8080/oauth/token',
                        type:'post',
                        data:$('#form').serialize(),
                        async:true,
                        success:function (response,status,xhr) {
                            result.val(response);
                            access_token.val(response.access_token);
                            refresh_token.val(response.refresh_token);
                        }
                    });
                    break;
                case 'client_credentials':
                    $.ajax({
                        url:'http://localhost:8080/oauth/token',
                        type:'post',
                        data:$('#form').serialize(),
                        async:true,
                        success:function (response,status,xhr) {
                            result.val(response);
                            access_token.val(response.access_token);
                            refresh_token.val(response.refresh_token);
                        }
                    });
                    break;
                default:
                    break;

            }



        });

    });

</script>
</body>
</html>